<template>
	<div>
		<el-container>
			<el-container>
				<el-main style="background-color:#bbb">
					<el-row type="flex" class="row-bg" justify="space-around">
						<el-col :span="6">
							<el-button>首页</el-button>
						</el-col>
						<el-col :span="6"> <el-button>排行</el-button> </el-col>
						<el-col :span="6"> <el-button>充值</el-button> </el-col>
						<el-col :span="6"> <el-button>积分</el-button> </el-col>
					</el-row>
					<div style="padding:50px">
						<el-carousel indicator-position="outside">
							<el-carousel-item v-for="item in 4" :key="item">
								<h3>{{ item }}</h3>
							</el-carousel-item>
						</el-carousel>
					</div>
					<div>
						<label for="">推荐房间</label>
						<div style="display:flex;">
							<RecommendRoom
								v-for="item in 4"
								v-bind:key="item"
								class="RecommendRoom"
							>
								{{ item }}
							</RecommendRoom>
						</div>
					</div>
				</el-main>
				<el-aside width="300px" style="background-color:#aaa">
					<div>
						现任市长
					</div>
					<div>
						<el-row>
							<el-col :span="6">排行榜</el-col>
							<el-col :span="13">
								<el-button size="mini" style="primary"
									>日消费</el-button
								>
								<el-button size="mini" style="default"
									>日积分</el-button
								>
							</el-col>
						</el-row>
						<el-row v-for="item in 10" :key="item">
							<el-col :span="12">{{ item }}名字名字</el-col>
							<el-col :span="12">14124142</el-col>
						</el-row>
					</div>
					<div>
						<el-row>
							<el-col :span="6">每日之星</el-col>
							<el-col :span="13">
								<el-button size="mini" style="primary"
									>日消费</el-button
								>
								<el-button size="mini" style="default"
									>日积分</el-button
								>
							</el-col>
						</el-row>
						<el-row v-for="item in 10" :key="item">
							<el-col :span="12">{{ item }}名字名字</el-col>
							<el-col :span="12">14124142</el-col>
						</el-row>
					</div>
				</el-aside>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import RecommendRoom from '../components/RecommendRoom.vue';
export default {
	components: {
		RecommendRoom,
	},
};
</script>

<style lang="scss" scopted>
.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}

.RecommendRoom {
	width: 25%;
}
</style>
